package edu.stu.book.book.keeping.component

import android.content.Context
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import edu.stu.book.book.keeping.R
import edu.stu.book.book.keeping.utils.ColorUtils

@Composable
fun CalculatorKeyboard(
    context: Context,
    modifier: Modifier = Modifier
) {
    val items = listOf(
        "7", "8", "9", "\uD83D\uDCC5今天",
        "4", "5", "6", "+",
        "1", "2", "3", "-",
        ".", "0", "⬅", "完成",
    )

    Column(
        modifier
            .background(Color.White)
            .padding(5.dp)

    ) {
        Box(
            modifier = modifier
                .fillMaxWidth(), contentAlignment = Alignment.CenterEnd
        ) {
            Text(
                text = "0.00",
                fontSize = 22.sp,
                color = ColorUtils.getColor(context),
                fontWeight = FontWeight.Medium,
            )
        }
        Row(
            modifier = modifier
                .fillMaxWidth()
                .padding(bottom = 10.dp, start = 5.dp, end = 5.dp, top = 5.dp)
                .background(ColorUtils.getColor(context, R.color.gray_10), RoundedCornerShape(8.dp))
                .padding(5.dp)

        ) {
            Text(
                text = "备注：",
                color = ColorUtils.getColor(context),
                fontSize = 15.sp,
            )
            Text(
                text = "点击填写备注",
                color = ColorUtils.getColor(context, R.color.gray),
                fontSize = 15.sp,
            )
        }


        LazyVerticalGrid(
            columns = GridCells.Fixed(4), // 每行固定4列
        ) {

            items(items, key = { it }) { item ->

                Box(
                    modifier = modifier
                        .border(
                            width = 0.05.dp,
                            color = ColorUtils.getColor(context, R.color.gray_10), // 边框颜色
                        )
                        .padding(4.dp)
                        .height(40.dp)
                        .clickable(
                            indication = null,
                            interactionSource = remember { MutableInteractionSource() }
                        ) {
                        },
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = item,
                        fontSize = 17.sp,
                        fontWeight = FontWeight.Medium,
                        color = ColorUtils.getColor(context)
                    )
                }

            }
        }
    }
}

@Preview(name = "CalculatorKeyboard")
@Composable
private fun PreviewCalculatorKeyboard() {
    CalculatorKeyboard(LocalContext.current)
}